Ext.define('AmpleHarvest.objects.tags.group.cPanel',
{
	extend			: 'Ext.panel.Panel',
	alias			: 'widget.ampleharvest-objects-tags-group-cpanel',
	bubbleEvents	:
	[
		'dochangegroup'
	],
	requires		:
	[
		'AmpleHarvest.DATA.Store.cGroupList'
	],
	frame			: true,
	initComponent	: function()
	{
		this.m_obj_ComboBox = Ext.create('Ext.form.ComboBox',
				{
					fieldLabel		: 'Group',
					store			: Ext
							.create('AmpleHarvest.DATA.Store.cGroupList'),
					queryMode		: 'remote',
					displayField	: 'name',
					valueField		: 'id'
				});
		this.m_obj_ComboBox.getStore().setActive();

		this.callParent();

		this.add(this.m_obj_ComboBox);
		this.m_obj_ComboBox.getStore().on('load', this.addExtra, this);
		this.m_obj_ComboBox.on('change', this.onChange, this);
		this.on('afterrender', function()
				{
					this.m_obj_ComboBox.doQuery("", true);
					this.m_obj_ComboBox.collapse();
				});

	},
	addExtra		: function()
	{
		var obj_Store = this.m_obj_ComboBox.getStore();

		obj_Store.add(
				{
					name	: 'All',
					id		: 'all'
				});
		obj_Store.sort(
				[
						{
							property	: 'name'
						}
				]
		);
		if (this.m_obj_ComboBox.getValue() == null)
		{
			this.m_obj_ComboBox.select(this.m_obj_ComboBox
					.findRecordByDisplay("Default"));
		}
	},
	onChange		: function(obj_Field, str_New, str_Old, obj_Options)
	{
		this
				.fireEvent(   
						AmpleHarvest.objects.tags.cPanel.C_STR_EVENT_CHANGE_GROUP,
						str_New, str_Old
				);
	}
}
);